import React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import qs from 'qs';
import _ from 'lodash';
import moment from 'moment';
import printJS from 'print-js';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { addTab, orderStatus, timeLimit, timeDifference } from '@/utils/utils';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
    Table,
    Button,
    Card,
    Col,
    Divider,
    Input,
    Row,
    Select,
    Modal,
    DatePicker,
    message,
    Dropdown,
    Menu,
    Tooltip,
} from 'antd';

import { DownOutlined } from '@ant-design/icons';
import '@ant-design/compatible/assets/index.css';

import Pagination from '../../components/Pagination';
import PrintElemInfo from './components/PrintElem';
import OpenCell from './components/OpenCell';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { info } = Modal;

const menuStyle = {
    padding: '8px 12px',
};

interface TableListProps extends FormComponentProps {
    dispatch: Dispatch<any>;
    logisCenterDeliveryList: any;
    INITINFO: any;
    checkPerm: any;
    currentUser: any;
    location: any;
    loading: boolean;
    screen: string;
}

interface TableListState {
    fId: number;
    current: number;
    pageSize: number | undefined;
    gardenName: string | undefined;
    shelfName: string | undefined;
    shelfType: string | undefined;
    cabinetName: string | undefined;
    formValues: any;
    orderInfo: any;
    phone: string;
    note: string;
    remark: string;
    reasonType: string;
    confirmPickupDialog: boolean;
    modifyPhoneDialog: boolean;
    modifyPhoneOcrDialog: boolean;
    problemDialog: boolean;
    backDialog: boolean;
    syncDialog: boolean;
    resendVisible: boolean;
    openCabVisible: boolean;
    cancelBackVisible: boolean;
    resendId: number;
    confirmInfo: any;
    confirmVisible: boolean;
    openCellVisible: boolean;
    openCellInfo: any;
    rowId: Number;
    readonlyTrue: boolean;
    isOpen: string;
    rotatingDegree: number;
    imgSize: number;
}

/* eslint react/no-multi-comp:0 */
@connect(
    ({
        logisCenterDeliveryList,
        common: { INITINFO, checkPerm },
        user: { currentUser },
        global: { screen },
        loading,
    }: any) => ({
        logisCenterDeliveryList,
        INITINFO,
        checkPerm,
        currentUser,
        screen,
        loading: loading.effects['logisCenterDeliveryList/fetch'],
    }),
)
class TableList extends React.Component<TableListProps, TableListState> {
    columns: any = [
        {
            title: '运单号',
            dataIndex: 'expCode',
            width: 160,
            render: (text: any, record: any) => (
                <Tooltip title={text}>
                    <div
                        className="nameLink"
                        onClick={() => this.handleShowDelivery(record.id, record.expCode)}
                    >
                        {text}
                    </div>
                </Tooltip>
            ),
        },
        {
            title: '收件人手机',
            dataIndex: 'consigneePhone',
            width: 120,
            render: (text: any, record: any) => (record.statusName === '预投递' && record.consigneePhone === '10000000000') ? '' : record.consigneePhone === '10000000000' ? '隐私号码' : text
        },
        {
            title: '取件码',
            dataIndex: 'openCode',
            width: 90,
            render: (text: string) => text || '--',
        },
        {
            title: '存放位置',
            dataIndex: 'address',
            width: 200,
            render: (text: any, record: any) => {
                const pkgNum = !record.pkgNum || record.pkgNum === '0' ? '' : ` ${record.pkgNum}`;
                const pkgText = record.storageType !== 5 ? pkgNum : '';
                return (
                    <span>{text ? text + pkgText : '--'}</span>
                );
            },
        },
        {
            title: '入出库时间',
            dataIndex: 'inTime',
            width: 120,
            render(text: string, record: any) {
                if (timeDifference(record.inTime) > 7 && !!!([10102, 10104, 10108, 10122, 10126, 10128, 10131].includes(record.status))) {
                    return <span style={{ color: 'red' }}>{text || '--'}</span>;
                }
                return <span>{text || '--'}</span>;
            },
        },
        {
            title: '快递公司',
            dataIndex: 'expressName',
            width: 100,
        },
        {
            title: '投递类型',
            dataIndex: 'deliveryWayName',
            width: 120,
        },
        {
            title: '订单状态',
            dataIndex: 'statusName',
            width: 100,
        },
        {
            title: '短信状态',
            dataIndex: 'smsStatusName',
            width: 90,
            render(text: string) {
                return <span>{text || '--'}</span>;
            },
        },
        {
            title: '操作',
            fixed: 'right',
            dataIndex: 'id',
            width: 230,
            render: (id: any, record: any) => (
                <>
                    <span className="operLink" onClick={() => this.handleShowDelivery(id, record.expCode)}>
                        详情
                    </span>
                    {
                        !!!([10102, 10104, 10108, 10122, 10124, 10126, 10128, 10130].includes(record.status)) && (
                            <>
                                <Divider type="vertical" />
                                <span className="operLink" onClick={() => record.status === 10135 ? this.handleOpenModifyPhoneOcr(record) : this.handleOpenModifyPhone(record)}>
                                    修改手机号
                                </span>
                            </>
                        )
                    }
                    {
                        !([10102, 10104, 10108, 10122, 10126, 10128, 10131].includes(record.status)) && (
                            <>
                                <Divider type="vertical" />
                                <span className="operLink" onClick={() => this.handleOpenConfirmPickup(record)}>
                                    故障取走
                                </span>
                            </>
                        )
                    }
                    {
                        !!!([10102, 10104, 10108, 10122, 10126, 10128].includes(record.status)) && (
                            <>
                                <Divider type="vertical" />
                                <Dropdown arrow overlay={this.menu(record)}>
                                    <span className="operLink">
                                        更多 <DownOutlined />
                                    </span>
                                </Dropdown>
                            </>
                        )}
                </>
            ),
        },
    ];

    state: TableListState = {
        fId: 0,
        current: 1,
        pageSize: 20,
        gardenName: undefined,
        shelfName: undefined,
        shelfType: undefined,
        cabinetName: undefined,
        formValues: {},
        orderInfo: {},
        phone: '',
        note: '',
        remark: '',
        reasonType: '0',
        confirmPickupDialog: false,
        modifyPhoneDialog: false,
        modifyPhoneOcrDialog: false,
        problemDialog: false,
        backDialog: false,
        syncDialog: false,
        resendVisible: false,
        openCabVisible: false,
        cancelBackVisible: false,
        resendId: 0,
        confirmInfo: {},
        confirmVisible: false,
        openCellVisible: false,
        openCellInfo: {},
        rowId: 0,
        readonlyTrue: true,
        isOpen: '0',
        rotatingDegree: 0,
        imgSize: 1,
    };

    timer: any = null;

    static getDerivedStateFromProps(props: any, state: any) {
        const { search } = props.location;
        const query = qs.parse(search, { ignoreQueryPrefix: true });
        const {
            page,
            psize,
            gardenName,
            shelfName,
            shelfType,
            cabinetName,
            ...formValues
        } = query;

        const result = {
            ...state,
            formValues,
            gardenName,
            shelfName,
            cabinetName,
            current: Number(page) || 1,
            pageSize: Number(psize) || (props.screen === 'sm' ? 100 : 20),
        };

        if (state.gardenName !== undefined) result.gardenName = state.gardenName;
        if (state.shelfName !== undefined) result.shelfName = state.shelfName;
        if (state.shelfType !== undefined) result.shelfType = state.shelfType;
        if (state.cabinetName !== undefined) result.cabinetName = state.cabinetName;

        return result;
    }

    componentDidMount() {
        this.setFieldsValue();

        const {
            logisCenterDeliveryList: { data },
        } = this.props;

        if (data?.content?.length) return;

        this.fetchAuthCheckPerm('pickup_confirm');
        this.fetchAuthCheckPerm('phone_edit');
        this.fetchAuthCheckPerm('add');
        this.fetchAuthCheckPerm('print');
        this.fetchAuthCheckPerm('export');
        this.fetchAuthCheckPerm('confirm');
        this.fetchAuthCheckPerm('cancel');
        this.fetchAuthCheckPerm('tocab');
        this.fetchAuthCheckPerm('repeat_sms');
        this.fetchExpressList();

        const { gardenName, shelfName, cabinetName } = this.state;

        if (gardenName) this.fetchGardenList({ name: gardenName });
        if (shelfName) this.fetchShelfList({ name: shelfName });
        if (cabinetName) this.fetchCabinetList({ name: cabinetName });

        this.fetchDeliveryList();

        document.addEventListener('keydown', this.handleOnKeyDownConfirm);
    }

    componentWillUmount() {
        document.removeEventListener("keydown", this.handleOnKeyDownConfirm);
    }

    componentDidUpdate(prevProps: any, prevState: any) {
        const { formValues, current, pageSize } = this.state;

        if (!_.isEqual(formValues, prevState.formValues)
            || current !== prevState.current
            || pageSize !== prevState.pageSize
        ) {
            this.setFieldsValue();
            this.fetchDeliveryList();
        }
    }

    // 设置表单值
    setFieldsValue = () => {
        const {
            formValues: {
                startDateTime, endDateTime, batchDate, minId, maxId, ...others
            },
        } = this.state;

        if (startDateTime) {
            others.start_end_time = [moment(startDateTime), endDateTime ? moment(endDateTime) : ''];
        } else {
            others.start_end_time = [moment(moment().subtract(2, 'days').format('YYYY-MM-DD 00:00:00')), ''];
        }

        others.batchDate = batchDate ? moment(batchDate) : '';
        if (!others.queryTimeType) {
            others.queryTimeType = '1';
        }

        const {
            form: { setFieldsValue },
        } = this.props;
        setFieldsValue(others);
    };

    // 获取校园小区列表
    fetchGardenList = (params: any) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'common/fetchGardenList2',
            payload: params,
        });
    };

    // 获取货架地堆列表
    fetchShelfList = (params: any) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'common/fetchShelfList',
            payload: params,
        });
    };

    // 获取柜体列表
    fetchCabinetList = (params: any) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'common/fetchCabinetList',
            payload: params,
        });
    };

    // 查询操作权限
    fetchAuthCheckPerm = (oper: string) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'common/fetchAuthCheckPerm',
            payload: {
                oper,
                resource: 'logis:order_delivery',
            },
        });
    };

    // 获取快递公司列表
    fetchExpressList = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'common/fetchExpressList2',
        });
    };

    // 获取问题件类型列表
    fetchProblemTypeList = () => {
        const {
            orderInfo: { id },
        } = this.state;
        const { dispatch } = this.props;
        dispatch({
            type: 'common/fetchProblemTypeList',
            payload: { id },
        });
    };

    // 获取数据
    fetchDeliveryList = () => {
        const {
            location: {
                query: { maxId, minId, ...other },
            },
        } = this.props;
        const search = qs.stringify(other);

        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/fetch',
            payload: {
                params: this.getQueryParams(),
                search,
                maxId,
                minId,
            },
        });
    };

    // 获取查询参数
    getQueryParams = () => {
        const {
            formValues: { shelfId, ...values },
            current,
            pageSize,
        } = this.state;

        const params = {
            ...values,
            pageSize,
            pageIndex: current,
        };

        if (!params.queryTimeType) {
            params.queryTimeType = 1;
        }

        if (params.startDateTime === undefined) {
            params.startDateTime = moment().subtract(2, 'days').format('YYYY-MM-DD 00:00:00');
        }

        const key = shelfId && shelfId.split('|')[0];
        const type = shelfId && shelfId.split('|')[1];
        if (key && Number(key) !== 0) {
            params.storagePid = key;
            params.storageType = Number(type) === 0 ? 3 : 2;
            params.shelfType = Number(type);
        }

        if (params.cabinetId) {
            params.storagePid = params.cabinetId;
            params.storageType = 1;
            delete params.shelfType;
        }

        delete params.shelfId;
        delete params.cabinetId;

        return params;
    };

    menu = (record: any) => {
        const { checkPerm } = this.props;
        // 增加状态数组
        const statusArr = [10102, 10104, 10108, 10122, 10126, 10128, 10131];
        const { Item } = Menu;

        return (
            <Menu>
                {
                    !!(checkPerm.cancel && record.predeliverStatus) && (
                        <Item
                            key="0"
                            style={menuStyle}
                            onClick={() => this.handleChangeConfirmModal(true, record)}
                        >
                            <span className="operLink">确认</span>
                        </Item>
                    )}
                {
                    !!(checkPerm.cancel && record.cancelStatus) && (
                        <Item
                            key="1"
                            style={menuStyle}
                            onClick={() => this.handleChangeOpenCellModal(true, record)}
                        >
                            <span className="operLink">取消</span>
                        </Item>
                    )}
                {
                    checkPerm.add && (+record.deliveryWay !== 6) && [10135, 10101].includes(record.status) && (
                        <Item
                            key="2"
                            style={menuStyle}
                            onClick={() => this.handleOpenSettingBack(record)}
                        >
                            <span className="operLink">标记退回</span>
                        </Item>
                    )}
                {
                    checkPerm.add && [10100, 10130].includes(record.status) && (
                        <Item
                            key="3"
                            style={menuStyle}
                            onClick={() => this.handleOpenSettingBack(record)}
                        >
                            <span className="operLink">退回</span>
                        </Item>
                    )}
                {/* {
          checkPerm.phone_edit && !!!([10122,10124,10130].includes(record.status)) && (
            <Item
              key="4"
              style={menuStyle}
              onClick={() => record.status === 10135 ? this.handleOpenModifyPhoneOcr(record) : this.handleOpenModifyPhone(record)}
            >
              <span className="operLink">修改手机号</span>
            </Item>
          )} */}
                {
                    !!(record.repeatSms && record.consigneePhone && checkPerm.repeat_sms) && (
                        <Item
                            key="5"
                            style={menuStyle}
                            onClick={() => this.handleResendSms(true, record.id)}
                        >
                            <span className="operLink">重发短信</span>
                        </Item>
                    )}
                {/* {
          !!(checkPerm.pickup_confirm && !statusArr.includes(record.status)) && (
            <Item
              key="6"
              style={menuStyle}
              onClick={() => this.handleOpenConfirmPickup(record)}
            >
              <span className="operLink">故障取走</span>
            </Item>
          )} */}
                {
                    checkPerm.tocab && record.status === 10121 && (
                        <Item
                            key="7"
                            style={menuStyle}
                            onClick={() => this.handleToCab(record.id)}
                        >
                            <span className="operLink">重发到柜体</span>
                        </Item>
                    )}
                {
                    checkPerm.tocab && [10101, 10124, 10135].includes(record.status) && record.storageType === 1 && (
                        <Item
                            key="8"
                            style={menuStyle}
                            onClick={() => this.handleOpenCabSetState(true, record.id)}
                        >
                            <span className="operLink">远程开箱</span>
                        </Item>
                    )}
                {
                    checkPerm.add && [10122, 10124].includes(record.status) && (
                        <Item
                            key="9"
                            style={menuStyle}
                            onClick={() => this.handleCancelBackSetState(true, record.id)}
                        >
                            <span className="operLink">取消退回</span>
                        </Item>
                    )}
            </Menu>
        );
    };

    /** 确认投递 */
    handleChangeConfirmModal = (confirmVisible: boolean, record: any = {}) => {
        const { id, orderType } = record;
        this.setState({
            confirmVisible,
            confirmInfo: { id, orderType },
        });
    };

    /**
     * 查询
     */
    handleSearch = (e: React.FormEvent) => {
        e.preventDefault();

        const {
            form: { validateFields },
            location: { query: prevQuery },
        } = this.props;

        validateFields((err, fieldsValue) => {
            if (err) return;
            const { start_end_time, batchDate, expressId } = fieldsValue;

            if (start_end_time) {
                if (start_end_time[0]) {
                    fieldsValue.startDateTime = moment(start_end_time[0]).format('YYYY-MM-DD HH:mm:ss');
                } else {
                    fieldsValue.startDateTime = '';
                }

                if (start_end_time[1]) {
                    fieldsValue.endDateTime = moment(start_end_time[1]).format('YYYY-MM-DD HH:mm:ss');
                } else {
                    fieldsValue.endDateTime = '';
                }
            } else {
                fieldsValue.startDateTime = '';
                fieldsValue.endDateTime = '';
            }

            if (batchDate) {
                fieldsValue.batchDate = moment(batchDate).format('YYYY-MM-DD');
            }
            if (expressId === 0) delete fieldsValue.expressId;

            delete fieldsValue.start_end_time;

            const query = {
                page: '1',
                ...fieldsValue,
            };
            const {
                gardenName,
                shelfName,
                shelfType,
                cabinetName,
            } = this.state;

            if (gardenName) query.gardenName = gardenName;
            if (shelfName) {
                query.shelfName = shelfName;
                query.shelfType = shelfType;
                delete query.cabinetName;
            }
            if (cabinetName) {
                query.cabinetName = cabinetName;
                delete query.shelfName;
            }

            const { dispatch } = this.props;
            dispatch({
                type: 'logisCenterDeliveryList/cleanCount',
            });

            Object.keys(query).forEach((item: any) => !query[item] && delete query[item]);
            if (!_.isEqual(query, prevQuery)) {
                addTab(dispatch, {
                    name: '快递查询',
                    url: `/logisCenter/delivery/list?${qs.stringify(query)}`,
                    isTopMenu: true,
                });
            } else this.fetchDeliveryList();
        });
    };

    /**
     * 重置
     */
    handleFormReset = () => {
        const { form: { resetFields } } = this.props;
        resetFields();

        const { dispatch } = this.props;
        addTab(dispatch, {
            name: '快递查询',
            url: '/logisCenter/delivery/list',
            isTopMenu: true,
        });
        dispatch({
            type: 'logisCenterDeliveryList/cleanCount',
        });
    };

    /**
     * 查询校园小区
     */
    handleSearchGarden = (value: string) => {
        if (value) {
            clearTimeout(this.timer);

            this.timer = setTimeout(() => {
                this.fetchGardenList({ name: value });
                this.setState({ gardenName: value });
            }, 500);
        }
    };

    /**
     * 选择校园小区
     */
    handleChangeGarden = (value: string) => {
        if (!value) this.commonRest();
    };

    /**
     * 选择器失去焦点
     */
    onBlurSelect = (fieldName: string, dataName: string) => {
        const { form: { getFieldValue, setFieldsValue }, INITINFO } = this.props;
        const fieldValue = getFieldValue(fieldName);

        if (INITINFO[dataName].length && fieldValue) {
            if (fieldName === 'cabinetId') {
                this.setState({ cabinetName: INITINFO[dataName][0].name });
                // setFieldsValue({ [fieldName]: String(INITINFO[dataName][0].id) });
            }
        } else if (!fieldValue && fieldName === 'gardenId') {
            this.commonRest();
        } else if (!INITINFO[dataName].length) {
            setFieldsValue({ [fieldName]: undefined });
        }
    };

    commonRest = () => {
        this.setState({
            gardenName: '',
            shelfName: '',
            shelfType: '',
        });

        const { form: { setFieldsValue } } = this.props;
        setFieldsValue({ parcelPwd: undefined, shelfId: undefined });
    }

    // 聚焦货架地堆
    onFocusShelf = () => {
        const { form: { getFieldValue } } = this.props;
        if (!getFieldValue('gardenId')) message.error('请先选择校园小区');
    };

    /**
     * 查询货架地堆
     */
    handleSearchShelf = (value: string) => {
        const { form: { getFieldValue } } = this.props;
        const gardenId = getFieldValue('gardenId');
        if (!gardenId) return;

        if (value) {
            clearTimeout(this.timer);

            this.timer = setTimeout(() => {
                this.fetchShelfList({
                    gardenId,
                    name: value,
                });
            }, 500);
        }
    };

    /**
     * 选择货架地堆
     */
    handleChangeShelf = (value: any) => {
        const { form: { setFieldsValue } } = this.props;
        setFieldsValue({ cabinetId: undefined });

        const { INITINFO: { shelfList } } = this.props;
        const shelf = !value
            ? {}
            : shelfList.find((_shelf: any) => _shelf.id === Number(value.split('|')[0]));
        this.setState({
            shelfName: shelf ? shelf.name : '',
            shelfType: shelf ? shelf.type : '',
            cabinetName: '',
        });
    };

    /**
     * 查询柜体
     */
    handleSearchCabinet = (value: string) => {
        if (value) {
            clearTimeout(this.timer);

            this.timer = setTimeout(() => {
                this.fetchCabinetList({ name: value });
            }, 500);
        }
    };

    /**
     * 选择柜体
     */
    handleChangeCabinet = (value: string) => {
        const { form: { setFieldsValue } } = this.props;
        setFieldsValue({ shelfId: undefined });

        const { INITINFO: { cabinetList } } = this.props;
        const cabinet = cabinetList.find((_cabinet: any) => _cabinet.id === Number(value));
        this.setState({
            cabinetName: cabinet ? cabinet.name : '',
            shelfName: '',
        });
    };

    /**
     * 打开确认取走弹窗
     */
    handleOpenConfirmPickup = (orderInfo: any) => {
        this.setState({
            orderInfo,
            confirmPickupDialog: true,
        });
    };

    /**
     * 关闭确认取走弹窗
     */
    handleCloseConfirmPickup = () => {
        this.setState({
            isOpen: '0',
            confirmPickupDialog: false,
        });
    };

    /**
     * 选择故障取走类型
     */
    handChangeIsOpen = (isOpen: string) => {
        this.setState({ isOpen });
    };

    /**
     * 确定取走
     */
    handleConfirmPickup = () => {
        const { orderInfo: { id }, isOpen } = this.state;
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/pickup',
            payload: {
                query: this.getQueryParams(),
                params: { id, isOpen },
            },
        });

        this.handleCloseConfirmPickup();
    };

    /**
     * 打开修改手机号弹窗
     */
    handleOpenModifyPhone = (orderInfo: any) => {
        this.setState({
            orderInfo,
            modifyPhoneDialog: true,
        });
    };

    /**
     * 关闭修改手机号弹窗
     */
    handleCloseModifyPhone = () => {
        this.setState({ modifyPhoneDialog: false, phone: '', remark: '' });
    };

    /**
     * 修改手机号
     */
    handleModifyPhone = () => {
        const { phone } = this.state;
        if (!phone.trim()) {
            message.error('手机号不能为空');
            return;
        }

        const { orderInfo: { id, consigneePhone }, remark } = this.state;
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/modify',
            payload: {
                query: this.getQueryParams(),
                params: {
                    id,
                    newPhone: phone,
                    oldPhone: consigneePhone,
                    remark,
                },
            },
        });
        this.handleCloseModifyPhone();
    };

    // 获取快递单图片地址
    fetchOrderImgUrl = (orderInfo: any) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'common/fetchOrderImgUrl',
            payload: { id: orderInfo.id },
        });
    };

    /**
     * 打开修改手机号弹窗OCR
     */
    handleOpenModifyPhoneOcr = (orderInfo: any) => {
        // 获取图片地址
        this.fetchOrderImgUrl(orderInfo)

        this.setState({
            orderInfo,
            modifyPhoneOcrDialog: true,
        });
    };

    /**
     * 关闭修改手机号弹窗OCR
     */
    handleCloseModifyPhoneOcr = () => {
        this.setState({ modifyPhoneOcrDialog: false, phone: '', remark: '' });
    };

    /**
     * 修改手机号Ocr
     */
    handleModifyPhoneOcr = () => {
        const { phone } = this.state;
        if (!phone.trim()) {
            message.error('请补录11位手机号');
            return;
        } else if (!/^1[3456789]\d{9}$/.test(phone.trim())) {
            message.error('手机号格式错误');
            return;
        } else {
            const { orderInfo: { id }, remark } = this.state;
            const { dispatch } = this.props;
            dispatch({
                type: 'logisCenterDeliveryList/modify',
                payload: {
                    query: this.getQueryParams(),
                    params: {
                        id,
                        newPhone: phone,
                        oldPhone: "",
                        remark,
                    },
                },
            });
            this.handleCloseModifyPhoneOcr();
        };
    };

    handleOnKeyDownConfirm = (event: any) => {
        const { modifyPhoneOcrDialog } = this.state;
        if (event.keyCode === 13 && modifyPhoneOcrDialog) this.handleModifyPhoneOcr();
    }

    /**
     * 打开同步订单弹窗
     */
    handleOpenSyncOrder = () => {
        this.setState({ syncDialog: true });
    };

    /**
     * 关闭同步订单弹窗
     */
    handleCloseSyncOrder = () => {
        this.setState({
            syncDialog: false,
            phone: '',
            remark: '',
        });
    };

    /**
     * 导出Excel
     */
    handleExportExcel = () => {
        info({
            title: '报表正在导出，请稍后至新统计系统-报表管理中下载查看',
        });

        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/export',
            payload: this.getQueryParams(),
        });
    };

    /**
     * 打印
     */
    handlePrint = () => {
        printJS({
            printable: 'billDetails',
            type: 'html',
            targetStyles: ['*'],
            onPrintDialogClose: () => '关闭',
            onError: error => error,
        });
    };

    /**
     * 点击重发短信
     */
    handleResendSms = (resendVisible: boolean, resendId: number = 0) => {
        this.setState({ resendId, resendVisible });
    };

    /**
     * 重发短信
     */
    handleRepeatSms = () => {
        const { resendId } = this.state;
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/repeatSms',
            payload: {
                query: this.getQueryParams(),
                params: { id: resendId },
            },
        });
        this.handleResendSms(false);
    };

    /**
     * 重发到柜体
     */
    handleToCab = (id: number) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/toCab',
            payload: {
                query: this.getQueryParams(),
                params: { id },
            },
        });
    };

    /**
     * 点击远程开箱
     */
    handleOpenCabSetState = (openCabVisible: boolean, resendId: number = 0) => {
        this.setState({ resendId, openCabVisible });
    };

    /**
     * 远程开箱
     */
    handleOpenCab = () => {
        const { resendId } = this.state;
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/openCab',
            payload: {
                query: this.getQueryParams(),
                params: { id: resendId },
            },
        });
        this.handleOpenCabSetState(false);
    };

    // 获取退回原因列表
    fetchWithdrawReasonList = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'common/fetchWithdrawReasonList',
            payload: {},
        });
    };

    /**
     * 打开设置退回弹窗
     */
    handleOpenSettingBack = (orderInfo: any) => {
        this.setState({ orderInfo, backDialog: true }, () => this.fetchWithdrawReasonList());
    };

    /**
     * 关闭设置退回弹窗
     */
    handleCloseSettingBack = () => {
        this.setState({
            backDialog: false,
            phone: '',
            note: '',
            reasonType: '0',
        });
    };

    /**
     * 设置退回
     */
    handleSettingBack = () => {
        const { reasonType, note } = this.state;
        if (reasonType === '0') {
            message.error('请选择退回原因');
            return;
        }

        const { orderInfo: { id } } = this.state;
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/signBack',
            payload: {
                query: this.getQueryParams(),
                params: {
                    id,
                    reasonType: Number(reasonType),
                    note,
                },
            },
        });

        this.handleCloseSettingBack();
    };

    /**
     * 点击取消退回
     */
    handleCancelBackSetState = (cancelBackVisible: boolean, resendId: number = 0) => {
        this.setState({ resendId, cancelBackVisible });
    };

    /**
     * 取消退回
     */
    handleCancelBack = () => {
        const { resendId } = this.state;
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/cancelBack',
            payload: {
                query: this.getQueryParams(),
                params: { id: resendId },
            },
        });
        this.handleCancelBackSetState(false);
    };

    /**
     * 投递确认
     */
    handleConfirmDelivery = () => {
        const { confirmInfo } = this.state;
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/confirm',
            payload: {
                query: this.getQueryParams(),
                params: confirmInfo,
            },
        });
        this.handleChangeConfirmModal(false);
    };

    handleChangeOpenCellModal = (openCellVisible: boolean, record?: any) => {
        this.setState({
            openCellVisible,
            openCellInfo: record
                ? {
                    orderType: record.orderType,
                    id: record.id,
                }
                : {},
        });
    };

    /**
     * 取消投递
     */
    handleCancelDelivery = (id: number, orderType: number, openCell: number) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/cancel',
            payload: {
                query: this.getQueryParams(),
                params: { id, orderType, openCell },
            },
        });
    };

    /**
     * 查看快递
     */
    handleShowDelivery = (id: number, expCode: string) => {
        const { dispatch } = this.props;
        addTab(dispatch, {
            name: `查看${expCode}`,
            url: `/logisCenter/delivery/list/detail/${id}`,
        });
    };

    /**
     * 追回件管理
     */
    handleRecoverManager = () => {
        const { dispatch } = this.props;
        addTab(dispatch, {
            name: '追回件管理',
            url: '/logisCenter/delivery/list/recoverList',
        });
    };

    /**
     * 查询历史订单
     */
    handleHistoryOrder = () => {
        const { dispatch } = this.props;
        addTab(dispatch, {
            name: '查询历史订单',
            url: '/logisCenter/delivery/list/historyList',
        });
    };

    /**
     * 查看总数
     */
    handleShowCount = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'logisCenterDeliveryList/count',
            payload: this.getQueryParams(),
        });
    };

    // 分页
    onSelectChange = (type: string) => {
        const { formValues, current, pageSize } = this.state;
        const { logisCenterDeliveryList: { data } } = this.props;

        const query = {
            ...formValues,
            page: type === 'prev' ? current - 1 : current + 1,
            psize: pageSize,
        };

        const contentObj = data.content.find((item: any) => item.current === current);
        if (type === 'prev') {
            if (contentObj?.list?.length) {
                query.minId = contentObj.list[0].id;
            } else {
                const prevContentObj = data.content.find((item: any) => item.current === current - 1);
                const list = prevContentObj ? prevContentObj.list : [];
                query.preId = list[list.length - 1].id;
            }
            delete query.maxId;
        } else if (type === 'next') {
            const list = contentObj ? contentObj.list : [];
            query.maxId = list[list.length - 1].id;
            delete query.minId;
            delete query.preId;
        }

        const { dispatch } = this.props;
        addTab(dispatch, {
            name: '快递查询',
            url: `/logisCenter/delivery/list?${qs.stringify(query)}`,
            isTopMenu: true,
        });
    };

    // 选择显示行数
    onShowSizeChange = (pageSize: number) => {
        const { formValues } = this.state;
        const query = {
            ...formValues,
            page: 1,
            psize: pageSize,
        };

        const { dispatch } = this.props;
        addTab(dispatch, {
            name: '快递查询',
            url: `/logisCenter/delivery/list?${qs.stringify(query)}`,
            isTopMenu: true,
        });
    };

    /**
     * 输入新手机号
     */
    handleChangePhone = (e: any) => {
        this.setState({ phone: e.target.value });
    };

    /**
     * 输入备注
     */
    handleChangeNote = (e: any) => {
        this.setState({ note: e.target.value });
    };

    /**
     * 选择问题件类型
     */
    handChangeReasonType = (reasonType: string) => {
        this.setState({ reasonType });
    };

    // 取件密码聚焦的时候
    focusCheck = () => {
        const { form } = this.props;
        if (!form.getFieldValue('gardenId')) {
            message.error('请先选择校园小区');
            this.setState({
                readonlyTrue: true,
            });
        } else {
            this.setState({
                readonlyTrue: false,
            });
        }
    };

    onClickRow = ({ id }: any) => ({
        onClick: () => {
            this.setState({ rowId: id });
        },
    })

    setRowClassName = ({ id }: any) => {
        const { rowId } = this.state;
        return id === rowId ? 'clickRowStyl' : '';
    }

    // 旋转图片
    handleRotating = (degree: number) => {
        let { rotatingDegree } = this.state;
        rotatingDegree += degree;
        this.setState({ rotatingDegree }, () => this.setImgStyle());
    }

    // 设置图片style
    setImgStyle = () => {
        const { rotatingDegree, imgSize } = this.state;
        const img: any = document.getElementById('img');
        img.style.transform = `scale(${imgSize}) rotate(${rotatingDegree}deg)`;
    }

    // 放大缩小图片
    handleChangeImgSize = (size: number) => {
        const { imgSize } = this.state;
        const new_imgSize = imgSize + size;
        this.setState({
            imgSize: new_imgSize <= 0.2 ? imgSize : new_imgSize,
        }, () => this.setImgStyle());
    }

    // 渲染查询表单
    renderSearchFormElem = () => {
        const { readonlyTrue } = this.state;
        const {
            form: { getFieldDecorator, getFieldValue },
            INITINFO: {
                expressList, gardenList, shelfList, cabinetList,
            },
        } = this.props;

        let newShelfList = [];
        if (!getFieldValue('gardenId')) {
            newShelfList = [];
        } else {
            newShelfList = shelfList;
        }

        return (
            <Form onSubmit={this.handleSearch} className="tableListForm">
                <Row gutter={12}>
                    <Col md={12} sm={24}>
                        <FormItem label="　起止时间" colon={false}>
                            {getFieldDecorator('start_end_time', {
                                initialValue: [moment(moment().subtract(2, 'days').format('YYYY-MM-DD 00:00:00')), ''],
                            })(
                                <RangePicker
                                    showTime
                                    placeholder={['开始时间', '截止时间']}
                                    style={{ width: '100%' }}
                                    format="YYYY/MM/DD HH:mm:ss"
                                    disabledDate={current => timeLimit(current, 3)}
                                    ranges={{
                                        今天: [moment().startOf('day'), moment().endOf('day')],
                                        本周: [moment().startOf('week'), moment().endOf('week')],
                                        本月: [moment().startOf('month'), moment().endOf('month')],
                                        上月: [
                                            moment(moment().subtract({ day: new Date().getDate() - 1, month: 1 })),
                                            moment(moment().subtract({ day: new Date().getDate(), month: 0 })),
                                        ],
                                    }}
                                />,
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="　校园小区" colon={false}>
                            {getFieldDecorator('gardenId')(
                                <Select
                                    showSearch
                                    allowClear
                                    placeholder="请选择"
                                    onBlur={() => this.onBlurSelect('gardenId', 'gardenList')}
                                    onSearch={this.handleSearchGarden}
                                    onChange={this.handleChangeGarden}
                                    filterOption={false}
                                    notFoundContent={null}
                                >
                                    {gardenList.map((garden: any) => (
                                        <Option
                                            value={String(garden.id)}
                                            key={garden.id}
                                        >
                                            {garden.name}
                                        </Option>
                                    ))}
                                </Select>,
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="　货架地堆" colon={false}>
                            {getFieldDecorator('shelfId')(
                                <Select
                                    showSearch
                                    allowClear
                                    placeholder="请输入货架地堆地址"
                                    filterOption={false}
                                    notFoundContent={null}
                                    onBlur={() => this.onBlurSelect('shelfId', 'shelfList')}
                                    onFocus={() => this.onFocusShelf()}
                                    onSearch={this.handleSearchShelf}
                                    onChange={this.handleChangeShelf}
                                >
                                    {newShelfList.map((shelf: any) => (
                                        <Option
                                            value={`${String(shelf.id)}|${shelf.type}`}
                                            key={shelf.id}
                                        >
                                            {shelf.name + shelf.code}
                                        </Option>
                                    ))}
                                </Select>,
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={12}>
                    <Col md={6} sm={24}>
                        <FormItem label="　柜体名称" colon={false}>
                            {getFieldDecorator('cabinetId')(
                                <Select
                                    showSearch
                                    allowClear
                                    placeholder="请选择"
                                    filterOption={false}
                                    notFoundContent={null}
                                    onBlur={() => this.onBlurSelect('cabinetId', 'cabinetList')}
                                    onSearch={this.handleSearchCabinet}
                                    onChange={this.handleChangeCabinet}
                                >
                                    {cabinetList.map((cabinet: any) => (
                                        <Option
                                            key={cabinet.id}
                                            value={String(cabinet.id)}
                                        >
                                            {cabinet.name}
                                        </Option>
                                    ))}
                                </Select>,
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="　柜体编号" colon={false}>
                            {getFieldDecorator('cabinetCode')(
                                <Input
                                    allowClear
                                    placeholder="请输入"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="　时间类型" colon={false}>
                            {getFieldDecorator('queryTimeType', {
                                initialValue: '1',
                            })(
                                <Select placeholder="请选择">
                                    <Option value="1">入库时间</Option>
                                    <Option value="2">出库时间</Option>
                                </Select>,
                            )}
                        </FormItem>
                    </Col>

                    <Col md={6} sm={24}>
                        <FormItem label="　快递公司" colon={false}>
                            {getFieldDecorator('expressId')(
                                <Select
                                    showSearch
                                    allowClear
                                    placeholder="请选择"
                                    filterOption={(input: any, option: any) => option.props.children
                                        .toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                >
                                    {expressList.map((express: any) => (
                                        <Option
                                            value={String(express.id)}
                                            key={express.id}
                                            style={{
                                                backgroundImage: `url(${express.img})`,
                                                backgroundSize: '18px,18px',
                                                backgroundRepeat: 'no-repeat',
                                                backgroundPosition: '8px center',
                                                padding: '0 33px ',
                                                lineHeight: '32px',
                                            }}
                                        >
                                            {express.name}
                                        </Option>
                                    ))}
                                </Select>,
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={12}>

                    <Col md={6} sm={24}>
                        <FormItem label="收件人手机" colon={false}>
                            {getFieldDecorator('consigneePhone')(
                                <Input
                                    allowClear
                                    type="number"
                                    placeholder="请输入"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="　订单状态" colon={false}>
                            {getFieldDecorator('status')(
                                <Select allowClear placeholder="请选择">
                                    {Object.keys(orderStatus).map(key => (
                                        <Option
                                            key={String(key)}
                                            value={String(key)}
                                        >
                                            {orderStatus[key]}
                                        </Option>
                                    ))}
                                </Select>,
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="　批次日期" colon={false}>
                            {getFieldDecorator('batchDate')(
                                <DatePicker
                                    placeholder="请选择日期"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="投递人手机" colon={false}>
                            {getFieldDecorator('courierPhone')(
                                <Input
                                    type="number"
                                    allowClear
                                    placeholder="请输入"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={12}>
                    <Col md={6} sm={24}>
                        <FormItem label="　　运单号" colon={false}>
                            {getFieldDecorator('expCode')(<Input
                                allowClear
                                placeholder="请输入"
                            />)}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="　批次编号" colon={false}>
                            {getFieldDecorator('seqNo')(
                                <Input
                                    type="number"
                                    allowClear
                                    placeholder="请输入"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="接驳人手机" colon={false}>
                            {getFieldDecorator('transhipPhone')(
                                <Input type="number" allowClear placeholder="请输入" style={{ width: '100%' }} />,
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="　　取件码" colon={false}>
                            {getFieldDecorator('openCode')(
                                <Input
                                    allowClear
                                    placeholder="请输入"
                                    onClick={this.focusCheck}
                                    readOnly={readonlyTrue}
                                    autoComplete="off"
                                />,
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={12}>
                    <Col md={24} sm={24}>
                        <div className="flexFeView" style={{ margin: '0 0 20px 0' }}>
                            <Button
                                type="primary"
                                htmlType="submit"
                                className="smallButton"
                            >
                                查询
                            </Button>
                            <Button
                                type="primary"
                                className="addButton marginL16 smallButton"
                                onClick={this.handleFormReset}
                            >
                                重置
                            </Button>
                        </div>
                    </Col>
                </Row>
            </Form>
        );
    };

    // 渲染修改手机号弹窗
    renderModifyPhoneModalElem = () => {
        const {
            phone,
            modifyPhoneDialog,
            orderInfo: { expCode, status, consigneePhone, inTime },
        } = this.state;

        const tip = (
            <div>
                <h2 style={{ color: 'red' }}>提示:该状态不能进行修改手机号操作!</h2>
                <div>
                    <span>运单号：</span>
                    <span>{expCode}</span>
                </div>
                <div>
                    <span>订单状态：</span>
                    <span>{orderStatus[status]}</span>
                </div>
            </div>
        );

        const form = (
            <Form className="tableListForm">
                <Row>
                    <Col md={20} sm={20}>
                        <Form.Item label="　　　运单号" colon={false}>
                            <Input disabled value={expCode} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col md={20} sm={20}>
                        <Form.Item label="　　入库时间" colon={false}>
                            <Input disabled value={inTime} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col md={20} sm={20}>
                        <Form.Item label="旧收件人手机" colon={false}>
                            <Input
                                type="number"
                                disabled
                                value={consigneePhone}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col md={20} sm={20}>
                        <Form.Item label="新收件人手机" colon={false}>
                            <Input
                                type="number"
                                placeholder="请输入"
                                value={phone}
                                onChange={this.handleChangePhone}
                            />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        );

        const cannot = [10102, 10104, 10122, 10126, 10128, 10131].includes(status);
        return (
            <Modal
                title="修改手机号"
                visible={modifyPhoneDialog}
                onOk={cannot ? this.handleCloseModifyPhone : this.handleModifyPhone}
                onCancel={this.handleCloseModifyPhone}
            >
                {cannot ? tip : form}
            </Modal>
        );
    };

    // 渲染修改手机号弹窗Ocr
    renderModifyPhoneOcrModalElem = () => {
        const {
            phone,
            modifyPhoneOcrDialog,
            orderInfo: { expCode, status, inTime },
        } = this.state;

        const {
            INITINFO: { orderImgUrl },
        } = this.props;

        const tip = (
            <div>
                <h2 style={{ color: 'red' }}>提示:该状态不能进行修改手机号操作!</h2>
                <div>
                    <span>运单号：</span>
                    <span>{expCode}</span>
                </div>
                <div>
                    <span>订单状态：</span>
                    <span>{orderStatus[status]}</span>
                </div>
            </div>
        );

        const form = (
            <Form className="tableListForm" style={{ width: '100%', height: '500px' }}>
                <Row>
                    <Col xs={2} sm={4} md={6} lg={8} xl={13} >
                        <div
                            className="checkImg"
                            style={{
                                width: '100%',
                                height: '500px',
                                background: '#000',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                overflow: 'auto',
                            }}
                        >
                            <img
                                id="img"
                                src={orderImgUrl}
                                alt=""
                                style={{
                                    height: '100%',
                                    transition: '0.5s',
                                }}
                            />
                        </div>
                        {/* <div className="marginT20">
                <Button
                  type="primary"
                  icon={<ZoomInOutlined />}
                  className="marginR16"
                  onClick={() => this.handleChangeImgSize(0.2)}
                >
                  放大
                </Button>
                <Button
                  type="primary"
                  icon={<ZoomOutOutlined />}
                  className="marginR16"
                  danger
                  onClick={() => this.handleChangeImgSize(-0.2)}
                >
                  缩小
                </Button>
              </div> */}
                    </Col>
                    <Col xs={2} sm={4} md={6} lg={8} xl={10}>
                        <Row>
                            <Col md={30} sm={30}>
                                <div style={{ padding: '0 0 0 7px' }}>
                                    <Button
                                        className="marginR16 marginB12"
                                        onClick={() => this.handleRotating(90)}
                                    >
                                        顺时针转90°
                                    </Button>
                                    <Button
                                        className="marginR16 marginB12"
                                        onClick={() => this.handleRotating(-90)}
                                    >
                                        逆时针转90°
                                    </Button>
                                    <Button
                                        className="marginR16 marginB12"
                                        onClick={() => this.handleRotating(180)}
                                    >
                                        180°旋转
                                    </Button>
                                </div>
                            </Col>
                        </Row>
                        <Divider orientation="left"></Divider>
                        <Row>
                            <Col md={20} sm={20}>
                                <Form.Item label="　　　运单号" colon={false}>
                                    <Input disabled value={expCode} />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Divider orientation="left"></Divider>
                        <Row>
                            <Col md={20} sm={20}>
                                <Form.Item label="　　入库时间" colon={false}>
                                    <Input disabled value={inTime} />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Divider orientation="left"></Divider>
                        <Row>
                            <Col md={20} sm={20}>
                                <Form.Item label="　　　手机号" colon={false}>
                                    <Input
                                        type="number"
                                        placeholder="请输入11位手机号"
                                        allowClear
                                        maxLength={11}
                                        className="ocrPhoneInput"
                                        value={phone}
                                        onChange={this.handleChangePhone}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Form>
        );

        const cannot = [10102, 10104, 10122, 10126, 10128, 10100, 10131].includes(status);
        return (
            <Modal
                title="修改手机号"
                width={'55%'}
                visible={modifyPhoneOcrDialog}
                // onOk={cannot ? this.handleCloseModifyPhoneOcr : this.handleModifyPhoneOcr}
                onCancel={this.handleCloseModifyPhoneOcr}
                footer={[
                    // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
                    <Button key="back" onClick={this.handleCloseModifyPhoneOcr}>取消</Button>,
                    <Button key="submit" type="primary"
                        onClick={cannot ? this.handleCloseModifyPhoneOcr : this.handleModifyPhoneOcr}
                        onKeyDown={cannot ? this.handleCloseModifyPhoneOcr : this.handleOnKeyDownConfirm}>
                        确认
                    </Button>,]}
            >
                {cannot ? tip : form}
            </Modal>
        );
    };

    // 渲染标记退回/退回
    renderBackModalElem = () => {
        const {
            backDialog,
            orderInfo: { expCode, inTime },
            note,
            reasonType,
        } = this.state;

        const {
            INITINFO: { withdrawReasonList },
        } = this.props;

        return (
            <Modal
                title="退回原因"
                visible={backDialog}
                onOk={this.handleSettingBack}
                onCancel={this.handleCloseSettingBack}
            >
                <Form className="tableListForm">
                    <Row>
                        <Col md={20} sm={20}>
                            <Form.Item label="　　运单号" colon={false}>
                                <Input disabled value={expCode} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col md={20} sm={20}>
                            <Form.Item label="　入库时间" colon={false}>
                                <Input disabled value={inTime} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col md={20} sm={20}>
                            <Form.Item label="　退回原因" colon={false}>
                                <Select
                                    onChange={this.handChangeReasonType}
                                    value={String(reasonType)}
                                >
                                    <Option key={0} value="0">
                                        请选择
                                    </Option>
                                    {withdrawReasonList.map((item: any) => (
                                        <Option key={item.reasonType} value={String(item.reasonType)}>
                                            {item.reasonDesc}
                                        </Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col md={20} sm={20}>
                            <Form.Item label="　　　备注" colon={false}>
                                <TextArea
                                    rows={4}
                                    value={note}
                                    onChange={this.handleChangeNote}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    };

    // 渲染故障取走
    renderPickupModalElem = () => {
        const {
            confirmPickupDialog,
            orderInfo: { storageType },
            isOpen,
        } = this.state;

        return (
            <Modal
                title="取走原因"
                visible={confirmPickupDialog}
                onOk={this.handleConfirmPickup}
                onCancel={this.handleCloseConfirmPickup}
            >
                <Form className="tableListForm">
                    <Row>
                        <Col md={20} sm={20}>
                            <Form.Item label="原因: " colon={false}>
                                <Select
                                    onChange={this.handChangeIsOpen}
                                    value={isOpen}
                                >
                                    <Option key={0} value="0">仅取走</Option>
                                    {storageType === 1 && (
                                        <Option key={1} value="1">开箱并取走</Option>
                                    )}
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    };

    render() {
        const {
            current,
            pageSize,
            confirmPickupDialog,
            orderInfo,
            resendVisible,
            openCabVisible,
            cancelBackVisible,
            confirmVisible,
            openCellVisible,
            openCellInfo,
            formValues: { queryTimeType },
        } = this.state;

        const {
            checkPerm,
            loading,
            screen,
            logisCenterDeliveryList: { data },
        } = this.props;

        const contentObj = data.content.find((item: any) => item.current === current);
        const list = (contentObj ? contentObj.list : []) || [];

        if (screen === 'sm' || screen === 'lg') {
            delete this.columns[this.columns.length - 1].fixed;
        } else if (screen === 'md') {
            this.columns[this.columns.length - 1].fixed = 'right';
        }

        if (Number(queryTimeType) === 1 || queryTimeType === undefined) {
            this.columns[4].title = '入出库时间';
            this.columns[4].dataIndex = 'inTime';
        } else {
            this.columns[4].title = '入出库时间';
            this.columns[4].dataIndex = 'outTime';
        }

        const tipsArr = ['暂存区', '柜体', '货架', '地堆', '驿站', '新货架'];

        return (
            <>
                <PageHeader />
                <Card bordered={false} className="searchForm">
                    {this.renderSearchFormElem()}
                </Card>

                <Card bordered={false} className="tableList">
                    <div className="tableBtns">
                        {checkPerm.print && (
                            <Button
                                type="primary"
                                size="small"
                                className="smallButton marginR16"
                                onClick={this.handleRecoverManager}
                            >
                                追回件管理
                            </Button>
                        )}
                        <Button
                            type="primary"
                            size="small"
                            className="smallButton marginR16"
                            onClick={this.handleHistoryOrder}
                        >
                            查询历史订单
                        </Button>
                        {checkPerm.print && (
                            <Button
                                type="primary"
                                size="small"
                                className="smallButton marginR16"
                                onClick={this.handlePrint}
                            >
                                打印
                            </Button>
                        )}
                        {checkPerm.export && (
                            <Button
                                type="primary"
                                size="small"
                                className="smallButton marginR16"
                                onClick={this.handleExportExcel}
                            >
                                导出Excel
                            </Button>
                        )}
                    </div>
                    <Table
                        rowKey="id"
                        tableLayout="fixed"
                        className="statementTable tableHeight60"
                        columns={this.columns}
                        dataSource={list}
                        pagination={false}
                        loading={loading}
                        scroll={{ x: 1400 }}
                        onRow={this.onClickRow}
                        rowClassName={this.setRowClassName}
                    />
                    {(current > 1 || list.length > 0) && (
                        <Pagination
                            current={current}
                            pageSize={pageSize}
                            total={data.count}
                            length={list.length}
                            showCount={this.handleShowCount}
                            onChange={this.onSelectChange}
                            onShowSizeChange={this.onShowSizeChange}
                        />
                    )}
                </Card>

                {/* <Modal
          title="确认提示"
          visible={confirmPickupDialog}
          onOk={this.handleConfirmPickup}
          onCancel={this.handleCloseConfirmPickup}
        >
          <p>
            本功能只清理后台数据（不向{tipsArr[orderInfo.storageType - 1]}
            发送开箱指令），请谨慎操作！
          </p>
        </Modal> */}

                <Modal
                    title="确认提示"
                    visible={resendVisible}
                    onOk={this.handleRepeatSms}
                    onCancel={() => this.handleResendSms(false)}
                >
                    <p>确定要重发短信吗?</p>
                </Modal>

                <Modal
                    title="确认提示"
                    visible={openCabVisible}
                    onOk={this.handleOpenCab}
                    onCancel={() => this.handleOpenCabSetState(false)}
                >
                    <p>确定要远程开箱吗?</p>
                </Modal>

                <Modal
                    title="确认提示"
                    visible={cancelBackVisible}
                    onOk={this.handleCancelBack}
                    onCancel={() => this.handleCancelBackSetState(false)}
                >
                    <p>确定要取消退回吗?</p>
                </Modal>

                {this.renderModifyPhoneModalElem()}
                {this.renderModifyPhoneOcrModalElem()}
                {this.renderBackModalElem()}
                {this.renderPickupModalElem()}

                <Modal
                    title="确认提醒"
                    visible={confirmVisible}
                    onOk={this.handleConfirmDelivery}
                    onCancel={() => this.handleChangeConfirmModal(false)}
                >
                    <p style={{ textAlign: 'center' }}>确认投递？</p>
                </Modal>

                <OpenCell
                    openCellVisible={openCellVisible}
                    openCellInfo={openCellInfo}
                    search={this.getQueryParams()}
                    changeOpenCellModal={this.handleChangeOpenCellModal.bind(this)}
                />

                <PrintElemInfo dataList={list} />
            </>
        );
    }
}

export default Form.create<TableListProps>()(TableList);
